<template>
  <div class="wrapper" v-loading="loading">
    <div class="main">
      <div class="img-container" v-if="posterImg">
        <el-scrollbar class="scroll">
          <div class="img-box" ref="picture">
            <img class="poster" :src="posterImg" alt="海报" />
          </div>
        </el-scrollbar>
      </div>
      <div class="btn-container" v-if="posterImg">
        <el-button type="primary" @click="downloadImage(posterImg)">下载海报</el-button>
        <el-button type="primary" @click="download(qrCodeUrl)">下载二维码</el-button>
        <div class="tips">
          <p>如二维码不能直接下载，</p>
          <p>可在打开的页面中点击鼠标右键进行保存</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import download from "ly-downloader";
import { getPersonId, getPoster } from "@/api";
export default {
  data() {
    return {
      personId: "",
      cardType: 28,
      shareQuery: {
        d: "", // consultantId
        i: true, // isShare
        t: 28, // TODO：目前写死 cardType
      },
      sharePath: "",
      qrCodeUrl: "",
      posterImg: "",
      username: "",
    };
  },
  async created() {
    this.username = JSON.parse(sessionStorage.getItem("userInfo")).user_name;
    await this.getPersonIdFn();
    await this.getPosterFn();
  },
  mounted() {},
  methods: {
    async getPosterFn() {
      const params = {
        cardType: 28,
        posterUrl: encodeURIComponent(this.sharePath),
      };
      const res = await getPoster(params);
      this.loading = false;
      if (res.code == 200) {
        this.posterImg = res.data;
      } else {
        this.$message.error(res.status_desc);
      }
    },
    downloadImage(imgSrc) {
      download(1, imgSrc, "");
    },
    download(url) {
      let aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = "image.png";
      aLink.target = "_blank";
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
    },
    async getPersonIdFn() {
      this.loading = true;
      const res = await getPersonId();
      if (res.code == 200) {
        this.shareQuery.d = res.data;
        // this.sharePath = `https://www.job1001.com/WuHanBuyPage?query=${JSON.stringify(
        //   this.shareQuery
        // )}`;
        //2024年4月19日21:52:18 改成c端营销页面
        this.sharePath = `https://www.job1001.com/CBuyPage?query=${JSON.stringify(
          this.shareQuery
        )}`;
        this.qrCodeUrl = `https://www.yl1001.com/ask/admin.php?background=000000&mode=zhadui&doaction=qrcode&width=
          200&height=200&no_short=1&openname=scanqr&p_id=&link_url=${encodeURIComponent(
            this.sharePath
          )}`;
      } else {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #fff;
  height: 100%;
  .main {
    display: flex;
    align-items: center;
  }
  .img-container {
    min-width: 200px;
    box-shadow: 3px 3px 10px #a8a9ac;
    margin-bottom: 12px;
    ::v-deep .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .img-box {
      position: relative;
      .poster {
        width: 420px;
        height: auto;
        object-fit: contain;
        display: block;
      }
      .scroll {
        height: 82vh;
        width: 100%;
      }
      .qrCode {
        position: absolute;
        width: 35%;
        height: 19.8%;
        bottom: 4.5%;
        right: 6%;
      }
    }
  }
  .btn-container {
    margin-left: 24px;
  }
  .tips {
    margin-top: 12px;
    color: $grey-6;
    line-height: 24px;
    font-size: 14px;
  }
}
</style>
